<template>
    <div>
        <div :class="{
            'pl-2 pr-2': props.label,
            'my-inset-switch': props.inset == true,
            'my-switch': props.inset == false,
        }" class="flex align-center pt-2 pb-2 relative">
            <div class="flex align-center">
                <!-- 编辑模式 -->
                <v-switch v-if="props.mode != 'view'" :error-messages="props.errorMessages" label="" :color="props.color" v-model="value"
                    :disabled="props.disabled" :readonly="props.readonly"></v-switch>
                <!-- 查看模式 -->
                <div v-if="props.mode == 'view'" class="flex align-center min-h-[36px]">
                    <v-chip size="small" class="!min-w-[42px] !h-[24px] flex justify-center" variant="flat" :color="props.color" v-if="value == true">
                        <span class="text-white">On</span>
                    </v-chip>
                    <v-chip size="small" class="!min-w-[42px] !h-[24px] flex justify-center" variant="flat" color="grey" v-else>
                        <span class="text-white">Off</span>
                    </v-chip>
                </div>
            </div>
            <!-- 標題 -->
            <div class="ml-[10px] text-[14px] font-[400] leading-[18px] mr-[14px]" v-if="props.label">{{ props.label }}</div>
            <!-- 新提示 -->
            <mrc_ess_InputBottomTip :tip="props.tip" :tipDetail="props.tipDetail"></mrc_ess_InputBottomTip>
        </div>
    </div>
    <!-- 間距 -->
    <div class="pointer-events-none" v-if="props.spacing == true" :style="{
        height: props.spacingHeight + 'px'
    }"></div>
</template>

<script lang="ts" setup>
import { watch } from "vue"
const props = defineProps({
    mode: {
        type: String,
        default: "edit"
    },
    spacing: {
        type: Boolean,
        default: false
    },
    spacingHeight: {
        type: [String, Number],
        default: 32
    },
    color: {
        type: String,
        default: "primary"
    },
    label: {
        type: String,
        default: ""
    },
    disabled: {
        type: Boolean,
        default: false
    },
    readonly: {
        type: Boolean,
        default: false
    },
    errorMessages: {
        type: String,
        default: ""
    },
    tip: {
        type: [String, Number],
        default: ""
    },
    tipDetail: {
        type: [String, Number],
        default: ""
    },
    inset: {
        type: Boolean,
        default: true
    }
})
const value = defineModel({
    type: Boolean,
    default: false
});
watch(value, (val) => {
    if (typeof (val) != 'boolean') {
        value.value = false;
    }
})
</script>

<style scoped>
.my-switch :deep(.v-switch__track) {
    min-width: 36px;
    height: 14px;
    opacity: 0.3;
}

.my-inset-switch :deep(.v-switch__track) {
    min-width: 38px;
    height: 18px;
    opacity: 0.3;
}

.my-inset-switch :deep(.v-switch__thumb) {
    width: 14px;
    height: 14px;
}

.my-switch :deep(.v-selection-control) {
    height: 14px;
    min-height: 14px;
}

.my-inset-switch :deep(.v-selection-control) {
    height: 18px;
    min-height: 18px;
}

.my-inset-switch :deep(.v-input__details) {
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: -10px;
    pointer-events: none;
}

.my-switch :deep(.v-input__details) {
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: -10px;
    pointer-events: none;
}
</style>